<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Choisis ton camp</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
	 <link href="module.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="css/stylish-portfolio.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

    <header id="top">
        <div style="text-align:center;">
            <h1>Choisis ton camp !</h1>
            <h3>Trouve moi!</h3>
        </div>
    </header>

<span id="test" hidden="hidden">0</span>
<span id="resultat"></span>

    <!-- Navigation -->
    <a id="menu-toggle" href="#" class="btn btn-dark btn-lg toggle"><i class="fa fa-bars"></i></a>
    <nav id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <a id="menu-close" href="#" class="btn btn-light btn-lg pull-right toggle"><i class="fa fa-times"></i></a>
            <li class="sidebar-brand">
                <a href="#top">Menu</a>
            </li>
            <li>
                <a href="#top"></a>
            </li>
            <li>
                <a href="personnel.php">Acces Personnel</a>
            </li>
            <li>
                <a href="#services">Services</a>
            </li>
            <li>
                <a href="#contact">Contact</a>
            </li>
        </ul>
    </nav>

    <!-- Header -->
    <header id="top" class="header">
        <div class="text-vertical-center">
            <h1>Projet Nuit de l'info</h1>
            <h3>Trouve moi!</h3>
            <br>
            <a href="#about" class="btn btn-dark btn-lg">Plus d'information</a>
        </div>
    </header>

    <!-- About -->
    <section id="about" class="about">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2>----------------</h2>
                </div>
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container -->
    </section>

    <!-- Services -->
    <!-- The circle icons use Font Awesome's stacked icon classes. For more information, visit http://fontawesome.io/examples/ -->
    <section id="services" class="services bg-primary">
        <div class="container">
            <div class="row text-center">
                <div class="col-lg-10 col-lg-offset-1">
                    <h2>Nos services</h2>
                    <hr class="small">
						<div class="col-md-3 col-sm-6">
                            <div class="service-item">
                                <span class="fa-stack fa-4x">
                                <i class="fa fa-circle fa-stack-2x"></i>
                                <i class="fa fa-cloud fa-stack-1x text-primary"></i>
                            </span>
                                <h4>
                                    <strong>Trouver un camp</strong>
                                </h4>
                                <p>Trouvez un camp pour vous faire vacciner</p>
                                <a href="refuge.php" class="btn btn-light">En savoir plus</a>
                            </div>
                        </div>
						
                        <div class="col-md-3 col-sm-6">
                            <div class="service-item">
                                <span class="fa-stack fa-4x">
                                <i class="fa fa-circle fa-stack-2x"></i>
                                <i class="fa fa-compass fa-stack-1x text-primary"></i>
                            </span>
                                <h4>
                                    <strong>Trouver un proche</strong>
                                </h4>
                                <p>Vous pouvez trouver un de vos proches en...</p>
                                <a id="found" href="trouverProche.php" class="btn btn-light">En savoir plus</a>
                            </div>
                        </div>
                        
                        <div class="col-md-3 col-sm-6">
                            <div class="service-item">
                                <span class="fa-stack fa-4x">
                                <i class="fa fa-circle fa-stack-2x"></i>
                                <i class="fa fa-cloud fa-stack-1x text-primary"></i>
                            </span>
                                <h4>
                                    <strong>Faire un don</strong>
                                </h4>
                                <p>Soyez généreux et faites un don ! Nous comptons sur vous</p>
                                <a href="don.html" class="btn btn-light">En savoir plus</a>
                            </div>
                        </div>
                        
                          <div class="col-md-3 col-sm-6">
                            <div class="service-item">
                                <span class="fa-stack fa-4x">
                                <i class="fa fa-circle fa-stack-2x"></i>
                                <i class="fa fa-cloud fa-stack-1x text-primary"></i>
                            </span>
                                <h4>
                                    <strong>Plus d'informations</strong>
                                </h4>
                                <p>Soyez généreux et faites un don ! Nous comptons sur vous</p>
                                <a href="info.html" img src="info2.png" class="btn btn-light">En savoir plus</a>
                            </div>
                        </div>
                    <!-- /.row (nested) -->
                </div>
                <!-- /.col-lg-10 -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container -->
    </section>
    
    
    <!--  MAP -->
    <section id="contact" class="map">
        <iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&amp;aq=0&amp;oq=twitter&amp;sll=28.659344,-81.187888&amp;sspn=0.128789,0.264187&amp;ie=UTF8&amp;hq=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&amp;t=m&amp;z=15&amp;iwloc=A&amp;output=embed"></iframe>
        <br />
        <small>
            <a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&amp;aq=0&amp;oq=twitter&amp;sll=28.659344,-81.187888&amp;sspn=0.128789,0.264187&amp;ie=UTF8&amp;hq=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&amp;t=m&amp;z=15&amp;iwloc=A"></a>
        </small>
        </iframe>
    </section>

 <!-- Footer -->
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-lg-10 col-lg-offset-1 text-center">
                    <h4><strong>Nuit de l'info 2014 - Unknown player</strong>
                    </h4>
                    <p>Paris Ouest La Defense<br>Nanterre</p>
					<p>Aonzo Thomas, Ashfha Sami, Bathily Brahima</p>
					<p>Bouri Caroline, Diallo Mohamed,Durand-Galliand Jérémy,
					<p>Mourer Laurent, Stephan Audrey, Postic Corentin, Zaire Jérémy.</p>
                    <ul class="list-unstyled">
                        <li><i class="fa fa-phone fa-fw"></i> 01 40 97 72 00</li>
                        <li><i class="fa fa-envelope-o fa-fw"></i>  <a href="mailto:name@example.com">name@example.com</a>
                        </li>
                    </ul>
                    <br>
                    <ul class="list-inline">
                        <li>
                            <a href="https://fr-fr.facebook.com/NuitDeLInfo"><i class="fa fa-facebook fa-fw fa-3x"></i></a>
                        </li>
                        <li>
                            <a href="https://twitter.com/nuitinfo"><i class="fa fa-twitter fa-fw fa-3x"></i></a>
                        </li>
                    </ul>
                    <hr class="small">
                    <p class="text-muted">Copyright &copy;  2014</p>
                </div>
            </div>
        </div>
            </footer>
    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="./js/bootstrap.min.js"></script>

   <script src="./js/other.js"></script>



    <!-- Custom Theme JavaScript -->
    <script>
    // Closes the sidebar menu
    $("#menu-close").click(function(e) {
        e.preventDefault();
        $("#sidebar-wrapper").toggleClass("active");
    });

    // Opens the sidebar menu
    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#sidebar-wrapper").toggleClass("active");
    });

    // Scrolls to the selected menu item on the page
    $(function() {
        $('a[href*=#]:not([href=#])').click(function() {
            if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {

                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                if (target.length) {
                    $('html,body').animate({
                        scrollTop: target.offset().top
                    }, 1000);
                    return false;
                }
            }
        });
    });
    </script>

	
<script>
	
		document.getElementById("n1").style.display = "none";
		document.getElementById("n2").style.display = "none";
		document.getElementById("n3").style.display = "none";
		document.getElementById("n4").style.display = "none";
		document.getElementById("n5").style.display = "none";
		document.getElementById("n6").style.display = "none";
	
	
</script>


<script type="text/javascript">
	
	function jumpScroll() {
		window.scroll(0, 5000);
		scrolldelay=setTimeout('jumpScroll()', 50);
		//alert("yo");
	}
	
	function scrollUp() {
		window.scroll(0, 800);
		scrolldelay=setTimeout('scrollUp()', 50);
		//alert("yo");
	}
	
	function stopScroll(){
		clearTimeout(scrolldelay);
	}
	
	function ko1(){
		
		document.getElementById("n1").style.display = "initial";
		document.getElementById("n2").style.display = "initial";
		document.getElementById("n3").style.display = "initial";
		document.getElementById("n4").style.display = "initial";
		document.getElementById("n5").style.display = "initial";
		document.getElementById("n6").style.display = "initial";
		
		document.getElementById("n2").style.visibility="hidden"; 
		document.getElementById("n3").style.visibility="hidden"; 
		document.getElementById("n4").style.visibility="hidden"; 
		document.getElementById("n5").style.visibility="hidden"; 
		document.getElementById("n6").style.visibility="hidden"; 
		
		jumpScroll();
		
		setTimeout(function(){ document.getElementById("n2").style.visibility="visible";document.getElementById("n1").style.visibility="hidden";},500);
		setTimeout(function(){ document.getElementById("n3").style.visibility="visible";document.getElementById("n2").style.visibility="hidden";},1000);
		setTimeout(function(){ document.getElementById("n4").style.visibility="visible";document.getElementById("n3").style.visibility="hidden";},1500);
		setTimeout(function(){ document.getElementById("n5").style.visibility="visible";document.getElementById("n4").style.visibility="hidden";},2000);
		setTimeout(function(){ document.getElementById("n6").style.visibility="visible";document.getElementById("n5").style.visibility="hidden";},2500);
		
		setTimeout('stopScroll()',3000);
		
		setTimeout('scrollUp()',3010);
		
		setTimeout('stopScroll()',3100);
		
		
		setTimeout(function(){$("#found").removeClass("btn-light").addClass("btn-danger");},3300);
		setTimeout(function(){$("#found").removeClass("btn-danger").addClass("btn-light");},3500);
		setTimeout(function(){$("#found").removeClass("btn-light").addClass("btn-danger");},3700);
		setTimeout(function(){$("#found").removeClass("btn-danger").addClass("btn-light");},3900);
		setTimeout(function(){$("#found").removeClass("btn-light").addClass("btn-danger");},4100);
		setTimeout(function(){$("#found").removeClass("btn-danger").addClass("btn-light");},4300);
		setTimeout(function(){$("#found").removeClass("btn-light").addClass("btn-danger");},4300);
		setTimeout(function(){$("#found").removeClass("btn-danger").addClass("btn-light");},4300);
		setTimeout(function(){$("#found").removeClass("btn-light").addClass("btn-danger");},4300);
		setTimeout(function(){$("#found").removeClass("btn-danger").addClass("btn-light");},4300);
		setTimeout(function(){$("#found").removeClass("btn-light").addClass("btn-danger");},4300);
		
		setTimeout(function(){document.getElementById("n1").style.display = "none";},3300);
		setTimeout(function(){document.getElementById("n2").style.display = "none";},3300);
		setTimeout(function(){document.getElementById("n3").style.display = "none";},3300);
		setTimeout(function(){document.getElementById("n4").style.display = "none";},3300);
		setTimeout(function(){document.getElementById("n5").style.display = "none";},3300);
		setTimeout(function(){document.getElementById("n6").style.display = "none";},3300);
	
	}
	
	/*function ko2(){
		$("#n1").removeAttr( 'style' );
		$("#n1").attr("style","absolute");
	}
		
	$("#n1").removeAttr( 'style' );
	$("#n1").attr("position","absolute");*/
	
	
		//KONAMI
		
		document.addEventListener('keydown', function(event) {
		var test = document.getElementById("test").innerHTML;
		if (((test == 0 || test == 1) && event.keyCode == 38) //haut
		|| ((test == 2 || test == 3) && event.keyCode == 40) //bas
		|| ((test == 4 || test == 6) && event.keyCode == 37) //gauche
		|| ((test == 5 || test == 7) && event.keyCode == 39) //droite
		|| (test == 8 && event.keyCode == 66)) { // a
				 document.getElementById("test").innerHTML = parseInt(test)+1;
			 } 
			 else if (test == 9 && event.keyCode == 65) { // b
				 ko1();
			 }
			 else{
				 document.getElementById("test").innerHTML = 0 ;
			 }
		 });
	
	
</script>

<img src=".\img\n°1.png" alt="stickman" id="n1" style="opacity: 1;">
	<img src=".\img\n2.png" alt="stickman" id="n2" style="opacity: 1;">
	<img src=".\img\n3.png" alt="stickman" id="n3" style="opacity: 1;">
	<img src=".\img\n4.png" alt="stickman" id="n4" style="opacity: 1;">
	<img src=".\img\n5.png" alt="stickman" id="n5" style="opacity: 1;">
	<img src=".\img\n6.png" alt="stickman" id="n6" style="opacity: 1;">



</body>

</html>
